var AgentProvider = function () {
  var template = /* html */ `
    <div class="agent-provider" v-loading.fullscreen.lock="loading">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="addProvider">新增代理商</el-button>
        </template>
        <div slot="search-content">
          <search-form ref="searchForm" :search="search"></search-form>
        </div>
      </search-btn-view>
      <div class="agent-provider-table-div">
        <el-table fit stripe border :data="providerList" style="width: 100%" height="parent">
          <el-table-column prop="customerCode" label="代理商代码" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="customerName" label="代理商名称" min-width="150px" header-align="center"></el-table-column>
          <el-table-column prop="contact" label="联系人" min-width="100px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="结算付款方式" min-width="120px" align="center">
            <template slot-scope="scope">
              {{i18n.getMsg('customer.paymentWayType.'+scope.row.paymentWay)}}
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="联系电话" min-width="130px" header-align="center"></el-table-column>
          <el-table-column prop="email" label="邮箱地址" min-width="220px" header-align="center">
            <template slot-scope="scope">
              <div v-for="str in scope.row.email" :key="str">{{str}}</div>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="status" label="状态" min-width="80px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="操作" width="80px" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="updateProvider(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>

      <el-dialog :title="formType==='add'?'新增代理商':'修改代理商'" :visible.sync="openForm" width="500px" top="10vh" :close-on-click-modal="false"
        @closed="formClosed">
        <div style="height:calc(80vh - 54px);overflow:auto">
          <agent-provider-form v-if="openForm" :type="formType" :provider="selectProvider" :dropdown-option="dropdownOption"
            @save-success="saveSuccess">
          </agent-provider-form>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    mixins: [
      tablePaginationMixin()
    ],

    data: function () {
      var search = {
        customer: '',
        paymentWay: '',
        status: '使用'
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        providerList: [],
        openForm: false,
        formType: '',
        selectProvider: null,
        dropdownOption: {}
      };
    },

    created: function () {
      this.setProviderList(true);
    },

    methods: {
      setProviderList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
          type: 1
        };

        var search = this.search;
        var customer = search.customer;
        if (customer !== '') {
          postData.customerName = customer.name;
          postData.customerCode = customer.code;
        }

        var fields = ['paymentWay', 'status'];
        SysUtil.setPostData(postData, search, fields, true);

        this.loading = true;
        var self = this;
        ajaxRequest('basicData/queryCustomersSubTwo', postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var providerList = res.returnData;

          for (var i = 0; i < providerList.length; i++) {
            var provider = providerList[i];
            var paymentWay = provider.paymentWay;
            provider.paymentWay = Number(paymentWay);

            var email = provider.email;
            if (email) {
              email = email.split(';');
            } else {
              email = [];
            }
            provider.email = email;
          }

          self.providerList = providerList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function (error) {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setProviderList(true);
      },

      pageChange: function () {
        this.setProviderList();
      },

      addProvider: function () {
        this.formType = 'add';
        this.openForm = true;
      },

      updateProvider: function (provider) {
        this.formType = 'update';
        this.selectProvider = provider;
        this.openForm = true;
      },

      saveSuccess: function (type) {
        this.openForm = false;
        this.setProviderList();

        if (type === 'add' && this.$refs['searchForm'] !== undefined) {
          this.$refs['searchForm'].initDropdown();
        }
      },

      formClosed: function () {
        this.formType = '';
        this.selectProvider = null;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: AgentSearchForm,
      AgentProviderForm: AgentProviderForm
    },

    template: template
  };
}();
